<template>
  <div class="shop">
    <section class="hero-banner">
      <div class="banner-content">
        <h1 class="banner-title">端午好物</h1>
        <p class="banner-subtitle">精选传统商品，感受节日氛围</p>
      </div>
    </section>

    <section class="shop-container">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">端午特色商品</h2>
          <p class="section-description">选购传统端午商品，体验节日文化</p>
        </div>

        <div class="shop-controls">
          <div class="search-box">
            <input 
              type="text" 
              v-model="searchQuery" 
              placeholder="搜索商品..." 
              @input="filterProducts"
            >
            <i class="search-icon">🔍</i>
          </div>
          <div class="filter-controls">
            <select v-model="selectedCategory" @change="filterProducts">
              <option value="">所有分类</option>
              <option v-for="(category, index) in categories" :key="index" :value="category">
                {{ category }}
              </option>
            </select>
            <select v-model="sortOption" @change="sortProducts">
              <option value="default">默认排序</option>
              <option value="price-asc">价格从低到高</option>
              <option value="price-desc">价格从高到低</option>
              <option value="popular">人气排序</option>
            </select>
          </div>
        </div>

        <div class="products-grid">
          <div v-for="(product, index) in filteredProducts" :key="index" class="product-card">
            <div class="product-image-container">
              <img :src="product.image" :alt="product.name" class="product-image">
              <div v-if="product.discount" class="discount-badge">
                -{{ product.discount }}%
              </div>
            </div>
            <div class="product-content">
              <h3 class="product-title">{{ product.name }}</h3>
              <p class="product-description">{{ product.description }}</p>
              <div class="product-price">
                <span class="current-price">¥{{ product.price }}</span>
                <span v-if="product.originalPrice" class="original-price">
                  ¥{{ product.originalPrice }}
                </span>
              </div>
              <div class="product-actions">
                <button class="btn add-to-cart" @click="addToCart(product)">
                  加入购物车
                </button>
                <button class="btn buy-now" @click="showTaobao(product)">
                  立即购买
                </button>
              </div>
            </div>
          </div>
        </div>

        <div v-if="filteredProducts.length === 0" class="no-results">
          <p>没有找到符合条件的商品</p>
        </div>
      </div>
    </section>

    <!-- 淘宝iframe弹窗 -->
    <div v-if="showTaobaoFrame" class="taobao-modal">
      <div class="taobao-modal-content">
        <div class="modal-header">
          <h3>淘宝官网</h3>
          <button class="close-btn" @click="closeTaobao">&times;</button>
        </div>
        <iframe 
          src="https://www.taobao.com" 
          frameborder="0" 
          class="taobao-iframe"
          allowfullscreen
        ></iframe>
      </div>
    </div>

    <transition name="fade">
      <div v-if="showCartNotification" class="cart-notification">
        {{ cartNotificationMessage }}
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'Shop',
  data() {
    return {
      products: [
        {
          id: 1,
          name: '传统肉粽礼盒',
          description: '精选优质糯米和五花肉，传统工艺制作，6只装',
          price: 68,
          originalPrice: 88,
          discount: 23,
          category: '粽子',
          image: 'https://cbu01.alicdn.com/img/ibank/O1CN019Pm7gH26XNAIa6GGe_!!2680037671-0-cib.310x310.jpg',
          popularity: 4.5
        },
        {
          id: 2,
          name: '豆沙粽礼盒',
          description: '香甜红豆沙馅，甜而不腻，6只装',
          price: 58,
          category: '粽子',
          image: 'https://ts1.tc.mm.bing.net/th/id/R-C.a6e3674edef63468380f94dfcba42418?rik=onkOP%2bGgoxrjpg&riu=http%3a%2f%2fimg.alicdn.com%2fimgextra%2fi4%2f163961905%2fO1CN01lkfiJP1PwXKeaGPgr_!!163961905.jpg&ehk=zWi9KxeYYcu5UsErEXwNw8k6%2f%2fAc3W%2bRLDycDXJqVR4%3d&risl=&pid=ImgRaw&r=0',
          popularity: 4.2
        },
        {
          id: 3,
          name: '端午香囊套装',
          description: '传统中药配方，驱蚊防病，3只装',
          price: 39,
          category: '香囊',
          image: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.uOafdK0lVxH9dxvRB2caBAAAAA?rs=1&pid=ImgDetMain',
          popularity: 4.0
        },
        {
          id: 4,
          name: '艾草挂饰',
          description: '天然艾草制作，驱邪避疫，适合悬挂',
          price: 25,
          category: '装饰',
          image: 'https://img.alicdn.com/imgextra/i2/2899854703/O1CN01mM2NL31kc1XIkhLOZ_!!2899854703.jpg',
          popularity: 3.8
        },
        {
          id: 5,
          name: '五彩绳手链',
          description: '传统五彩绳编织，寓意吉祥平安',
          price: 15,
          category: '饰品',
          image: 'https://cbu01.alicdn.com/img/ibank/2017/118/721/4051127811_1938397124.jpg',
          popularity: 3.5
        },
        {
          id: 6,
          name: '雄黄酒礼盒',
          description: '传统配方雄黄酒，三瓶装',
          price: 89,
          originalPrice: 108,
          discount: 18,
          category: '酒水',
          image: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.oj99XccwuEa3SpkmfnY0lQHaFj?rs=1&pid=ImgDetMain',
          popularity: 4.1
        },
        {
          id: 7,
          name: '端午茶礼盒',
          description: '精选端午时令茶，清热解暑，200g装',
          price: 128,
          category: '茶叶',
          image: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.Jbe0YwyixoPCV72sby_ARAHaLH?rs=1&pid=ImgDetMain',
          popularity: 4.3
        },
        {
          id: 8,
          name: '龙舟模型',
          description: '精美龙舟模型，手工制作，30cm长',
          price: 199,
          category: '工艺品',
          image: 'https://ts1.tc.mm.bing.net/th/id/R-C.3e6c3db187555ac8cd975e455ca0f6d0?rik=CecXvL%2bYag33Hw&riu=http%3a%2f%2fwww.hqbwy.org.cn%2fUploadFiles%2f201964102120160.jpg&ehk=PpuayI1l1jf5vfLtlAGs7UcVetcu0xQMH1rKoZSJsyA%3d&risl=&pid=ImgRaw&r=0',
          popularity: 4.0
        }
      ],
      categories: ['粽子', '香囊', '装饰', '饰品', '酒水', '茶叶', '工艺品'],
      searchQuery: '',
      selectedCategory: '',
      sortOption: 'default',
      filteredProducts: [],
      showCartNotification: false,
      cartNotificationMessage: '',
      showTaobaoFrame: false
    }
  },
  created() {
    this.filteredProducts = [...this.products]
  },
  methods: {
    filterProducts() {
      this.filteredProducts = this.products.filter(product => {
        const matchesSearch = product.name.toLowerCase().includes(this.searchQuery.toLowerCase()) || 
                             product.description.toLowerCase().includes(this.searchQuery.toLowerCase())
        const matchesCategory = this.selectedCategory === '' || product.category === this.selectedCategory
        return matchesSearch && matchesCategory
      })
      this.sortProducts()
    },
    sortProducts() {
      if (this.sortOption === 'price-asc') {
        this.filteredProducts.sort((a, b) => a.price - b.price)
      } else if (this.sortOption === 'price-desc') {
        this.filteredProducts.sort((a, b) => b.price - a.price)
      } else if (this.sortOption === 'popular') {
        this.filteredProducts.sort((a, b) => b.popularity - a.popularity)
      } else {
        this.filteredProducts.sort((a, b) => a.id - b.id)
      }
    },
    addToCart(product) {
      this.$root.$emit('add-to-cart', {
        ...product,
        quantity: 1
      })
      this.showNotification(`${product.name} 已加入购物车`)
    },
    showTaobao() {
      this.showTaobaoFrame = true;
    },
    closeTaobao() {
      this.showTaobaoFrame = false;
    },
    showNotification(message) {
      this.cartNotificationMessage = message
      this.showCartNotification = true
      setTimeout(() => {
        this.showCartNotification = false
      }, 2000)
    }
  }
}
</script>

<style scoped>
.hero-banner {
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), 
              url('https://images.unsplash.com/photo-1606787366850-de6330128bfc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80  ');
  background-size: cover;
  background-position: center;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  margin-bottom: 60px;
}

.banner-title {
  font-size: 3.5rem;
  margin-bottom: 20px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.banner-subtitle {
  font-size: 1.5rem;
  margin-bottom: 30px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.shop-container {
  padding: 0 20px 80px;
}

.section-header {
  text-align: center;
  margin-bottom: 50px;
}

.section-title {
  font-size: 2.5rem;
  color: var(--primary-color);
  margin-bottom: 15px;
  position: relative;
  display: inline-block;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background: var(--primary-color);
}

.section-description {
  font-size: 1.1rem;
  color: #666;
  max-width: 700px;
  margin: 0 auto;
}

.shop-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.search-box {
  position: relative;
  flex: 1;
  max-width: 400px;
  margin-right: 20px;
}

.search-box input {
  width: 100%;
  padding: 10px 15px 10px 40px;
  border: 1px solid #ddd;
  border-radius: 30px;
  font-size: 1rem;
}

.search-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
}

.filter-controls {
  display: flex;
  gap: 15px;
}

.filter-controls select {
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 1rem;
  background-color: white;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 30px;
  margin-top: 30px;
}

.product-card {
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.product-image-container {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.product-card:hover .product-image {
  transform: scale(1.05);
}

.discount-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: var(--primary-color);
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 0.8rem;
  font-weight: bold;
}

.product-content {
  padding: 20px;
}

.product-title {
  font-size: 1.2rem;
  margin-bottom: 10px;
  color: var(--primary-color);
}

.product-description {
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 15px;
  line-height: 1.5;
}

.product-price {
  margin-bottom: 20px;
}

.current-price {
  font-size: 1.3rem;
  font-weight: bold;
  color: var(--primary-color);
}

.original-price {
  font-size: 0.9rem;
  color: #999;
  text-decoration: line-through;
  margin-left: 10px;
}

.product-actions {
  display: flex;
  gap: 10px;
}

.add-to-cart {
  flex: 1;
  background-color: white;
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
}

.add-to-cart:hover {
  background-color: #f8f8f8;
}

.buy-now {
  flex: 1;
  background-color: var(--primary-color);
  color: white;
}

.buy-now:hover {
  background-color: #9a0007;
}

.no-results {
  text-align: center;
  padding: 50px 0;
  color: #666;
}

.cart-notification {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: var(--primary-color);
  color: white;
  padding: 15px 25px;
  border-radius: 5px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  animation: slideIn 0.5s ease;
}

/* 淘宝iframe弹窗样式 */
.taobao-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.taobao-modal-content {
  background-color: white;
  width: 90%;
  height: 80%;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-header {
  padding: 15px 20px;
  background-color: var(--primary-color);
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  margin: 0;
}

.close-btn {
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  padding: 0 10px;
}

.taobao-iframe {
  width: 100%;
  height: 100%;
  border: none;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@media (max-width: 768px) {
  .hero-banner {
    height: 300px;
  }
  
  .banner-title {
    font-size: 2.5rem;
  }
  
  .banner-subtitle {
    font-size: 1.2rem;
  }
  
  .section-title {
    font-size: 2rem;
  }
  
  .shop-controls {
    flex-direction: column;
    align-items: stretch;
  }
  
  .search-box {
    max-width: 100%;
    margin-right: 0;
    margin-bottom: 15px;
  }
  
  .filter-controls {
    flex-direction: column;
    gap: 10px;
  }
  
  .product-actions {
    flex-direction: column;
  }
  
  .taobao-modal-content {
    width: 95%;
    height: 85%;
  }
}
</style>